<template>
  <div class="details">
    <img :src="moive_img" class="banner-image">
    <div class="positioning">
      <div style="display: flex;">
        <div class="positioning_left">
          <img :src="moive_img">
        </div>
        <div class="positioning_right">
          <h3>{{title_name}}</h3>
          <div style="display: flex;">
            <p class="p2" v-if="score==0">暂无评分</p>
            <h1 v-else>{{score}}</h1>
            <!--数组长度为5，共5次循环显示5颗星星-->
            <div v-for="(site,index) in 1" :key="index">
              <!-- 全黄星星 -->
              <img class="stars_img" src="/static/images/star_fill_whole.png" v-if="score>=index+1">
              <!-- 半黄星星 -->
              <img
                class="stars_img"
                src="/static/images/star_fill_half.png"
                v-if="score>=index && score%10!=0"
              >
              <!-- 全灰星星 -->
              <img class="stars_img" src="/static/images/star_fill_none.png" v-else>
              <p class="p1">{{number}}人评价</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 影片简介 -->
    <div class="abstract">
      <p>{{genre}}</p>
      <p>
        <span>{{year}}年上映&nbsp;&nbsp;</span>
        <span>{{countries}}</span>
      </p>
      <p>{{casts}}</p>
    </div>
    <!-- 想看 -->
    <div class="wish-reviews-container">
      <span class="wish-reviews">想看：{{want}}</span>
      <span class="wish-reviews">看过：{{seen}}</span>
    </div>
    <div class="d1">{{jianjie}}的剧情简介</div>
    <div class="d2" v-if="plot==''">暂无</div>
    <div class="d2" v-else>{{plot}}</div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  components: {},
  props: {},
  data() {
    return {
      id: 0,
      moive_img: null,
      title_name: "",
      score: 0,
      number: 0,
      genre: [],
      year: 0,
      countries: [],
      casts: [],
      want: "",
      seen: "",
      jianjie: "",
      plot: ""
    };
  },
  onLoad(option) {
    this.id = option.id;
    console.log(option.id);
    wx.setNavigationBarTitle({
      title: option.title
    });
    wx.showLoading({
      title: "玩命加载中",
      mask: true
    });
    setTimeout(function() {
      wx.hideLoading();
    }, 400);
    this.moive_single();
  },
  watch: {},
  computed: {
    ...mapGetters(["casts", "images"])
  },
  methods: {
    moive_single() {
      this.$store
        .dispatch("subject_details", this.id)
        .then(data => {
          console.log("接口数据：" + JSON.stringify(data.title));
          this.moive_img = this.images.large;
          this.title_name = data.original_title;
          this.score = data.rating.average;
          this.number = data.comments_count;
          this.genre = data.genres;
          this.year = data.year;
          this.countries = data.countries;
          for (var j = 0; j < data.casts.length; j++) {
            this.casts =
              data.casts[0].name +
              "(导演)/" +
              data.casts[1].name +
              "/" +
              data.casts[2].name;
          }
          this.want = data.wish_count;
          this.seen = data.reviews_count;
          this.jianjie = data.title;
          this.plot = data.summary;
        })
        .catch(error => {
          console.log("接口请求失败：" + error);
        });
    }
  },
  created() {},
  mounted() {}
};
</script>
<style scoped>
.stars_img {
  width: 25rpx !important;
  height: 25rpx !important;
}
/* 背景颜色 */
.banner-image {
  width: 100%;
  height: 350rpx;
  filter: blur(10rpx);
  -webkit-filter: blur(10rpx);
}
.positioning {
  position: absolute;
  top: 150rpx;
  left: 20rpx;
}
.positioning_left img {
  width: 175rpx;
  height: 238rpx;
}
.positioning_right {
  margin-left: 20rpx;
}
h3 {
  width: 520rpx;
  font-size: 36rpx;
  font-style: bold;
  color: white;
  margin-bottom: 50rpx;
  overflow: hidden; /*内容超出后隐藏*/
  text-overflow: ellipsis; /* 超出内容显示为省略号*/
  white-space: nowrap; /*文本不进行换行*/
}
h1 {
  font-size: 64rpx;
  color: white;
}
.p1 {
  color: white;
  font-size: 22rpx;
}
.p2 {
  color: white;
  font-size: 30rpx;
  display: flex;
  align-items: center;
}
/* 影片简介 */
.abstract {
  margin-top: 50rpx;
}
.abstract p {
  margin: 10rpx 20rpx;
  font-size: 26rpx;
}
.wish-reviews-container {
  display: flex;
  flex-direction: row;
  margin: 40rpx 20rpx;
  justify-content: space-between;
  color: orange;
}
.wish-reviews {
  border: solid 1px orange;
  border-radius: 4px;
  width: 47%;
  padding: 8rpx 0;
  text-align: center;
  font-size: 28rpx;
}
.d1 {
  margin: 20rpx;
  color: grey;
  font-size: 26rpx;
}
.d2 {
  margin: 5rpx 20rpx;
  font-size: 26rpx;
}
</style>